<template>
  <PageContainer>
    <view class="container">
      <Header title="表单详情" />
      <view class="header-box mb-16">
        <view class="form-title">{{ detailRef?.title }}</view>
        <view class="form-desc">{{ detailRef?.details }}</view>
        <view class="user-info-box">
          <view class="user-info">
            <TImage
              :src="detailRef?.avatar"
              width="56rpx"
              height="56rpx"
              errorImgType="person"
              borderRadius="56rpx"
            ></TImage>
            <text class="name">{{ detailRef?.name }}</text>
          </view>
          <text class="submit-time">{{ detailRef?.createTime }} 提交</text>
        </view>
      </view>
      <BasicsForm :schemas="schemas" @register="register" />
      <TButtonGroup v-if="!hideBtn" :styles="{ backgroundColor: '#fff' }">
        <TButton
          v-if="canModify === CanModifyEnum.Yes"
          class="gutter-btn"
          text="编辑"
          type="none"
          custom-class="borderBtn"
          @click="toEdit"
        />
        <TButton
          v-if="detailRef?.isFill"
          class="gutter-btn"
          text="再填一份"
          type="primary"
          @click="toFillInAnotherCopy"
        />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* serviceFormRecordDetail 服务表单详情 */

  import type { ServiceTicketFormSnapshootDetailResult } from '@/api/serviceForm/types';
  import Header from '@/components/Header/index.vue';
  import PageContainer from '@/components/PageContainer/index.vue';
  import TImage from '@/components/TImage/index.vue';
  import { redirectTo } from '@/router';
  import { ref, type PropType, onMounted } from 'vue';
  import BasicsForm from '@/components/Form/BasicsForm.vue';
  import { useForm, type FormSchema } from '@/components/Form';
  import { forEach, isArray } from 'lodash-es';
  import { localDataMapping } from '@/components/Form/hooks/useForm';
  import { CanModifyEnum } from '@/enums/serviceFormEnum';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { propTypes } from '@/utils/propTypes';

  const props = defineProps({
    data: {
      type: Object as PropType<ServiceTicketFormSnapshootDetailResult>,
      default: () => ({}),
    },
    hideBtn: propTypes.bool.def(false),
  });
  const detailRef = ref<ServiceTicketFormSnapshootDetailResult>();
  const schemas = ref<FormSchema[]>([]);
  const [register, {}] = useForm({
    labelAlign: 'left',
    labelPosition: 'top',
    disabled: true,
  });

  const canModify = ref<CanModifyEnum>(CanModifyEnum.No);

  onMounted(() => {
    detailRef.value = props.data;
    canModify.value = props.data.canModify;
    const list: FormSchema[] = [];
    forEach(props.data.formItemList, (v) => {
      const answer = v.formUserItemAnswerList;
      const obj: FormSchema = {
        field: v.id.toString(),
        label: v.showName,
        component: v.itemType,
        required: !!v.isRequired,
        dynamicDisabled: true,
        componentProps: {
          placeholder: v.value,
          localdata: localDataMapping(v.customFormItemAnswerList || [], {
            label: 'words',
            value: 'id',
          }),
        },
      }

      if (isArray(answer) && answer.length > 0) {
        obj.defaultValue = answer[answer.length - 1].content;
      }
      list.push(obj);
    });
    schemas.value = [...list];
  });

  const toEdit = () => {
    redirectTo({
      name: 'serviceFormFilling',
      options: {
        serviceTicketRecordId: detailRef.value?.id,
        serviceTicketFormId: detailRef.value?.serviceTicketFormId as number,
      },
    });
  };

  const toFillInAnotherCopy = () => {
    redirectTo({
      name: 'serviceFormFilling',
      options: {
        serviceTicketFormId: detailRef.value?.serviceTicketFormId as number,
      },
    });
  };
</script>

<style lang="scss" scoped>
  .container {
    .header-box {
      height: fit-content;
      padding: 32rpx;
      display: flex;
      flex-direction: column;
      gap: 32rpx;
      background-color: #fff;
      .form-title {
        font-size: 36rpx;
        line-height: 48rpx;
        word-break: break-all;
        font-weight: bold
      }
      .form-desc {
        color: #666664;
        font-size: 28rpx;
        line-height: 40rpx;
        white-space: pre-wrap;
      }
      .user-info-box {
        display: flex;
        align-items: center;
        gap: 32rpx;
        .user-info {
          display: flex;
          align-items: center;
          gap: 8rpx;
          .name {
            font-size: 28rpx;
            line-height: 40rpx;
          }
        }
        .submit-time {
          color: #999996;
          font-size: 24rpx;
          line-height: 32rpx;
        }
      }
    }
  }
</style>
